<template>
  <view class="container">
    <!-- 触发按钮 -->
    <button @click="openDepartmentSelect">选择部门</button>
    
    <!-- 显示已选部门 -->
    <view class="selected-dept" v-if="selectedDepartment">
      已选部门：{{ getDepartmentName(selectedDepartment) }}
    </view>

    <!-- 部门选择组件 -->
    <department-select
      ref="deptSelect"
      v-model="selectedDepartment"
      :options="departmentOptions"
      @confirm="onDepartmentConfirm"
    />
  </view>
</template>

<script>
import DepartmentSelect from '@/packages/mobile/components/departmentselect/departmentselect.vue'

export default {
  components: {
    DepartmentSelect
  },

  data() {
    return {
      selectedDepartment: '',
      // 部门数据示例
      departmentOptions: [
        { value: '1', text: '研发部' },
        { value: '2', text: '产品部' },
        { value: '3', text: '市场部' },
        { value: '4', text: '运营部' },
        { value: '5', text: '人力资源部' }
      ]
    }
  },

  methods: {
    // 打开部门选择
    openDepartmentSelect() {
      this.$refs.deptSelect.open()
    },

    // 确认选择回调
    onDepartmentConfirm(value) {
      console.log('选中的部门:', value)
    },

    // 获取部门名称
    getDepartmentName(value) {
      const dept = this.departmentOptions.find(item => item.value === value)
      return dept ? dept.text : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.selected-dept {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #303133;
}
</style> 